import type { App } from 'vue';
import 'viewerjs/dist/viewer.css';
import Viewer from 'v-viewer';
import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css';

/**
 * 注册v-viewer和v-highlight指令
 * @param app Vue应用实例
 */
export function setupViewerAndHighlight(app: App) {
  // 注册v-viewer指令
  app.use(Viewer);

  // 注册v-highlight指令
  app.directive('highlight', {
    mounted(el) {
      const blocks = el.querySelectorAll('pre code');
      blocks.forEach((block: HTMLElement) => {
        hljs.highlightElement(block);
      });
    },
    updated(el) {
      const blocks = el.querySelectorAll('pre code');
      blocks.forEach((block: HTMLElement) => {
        hljs.highlightElement(block);
      });
    }
  });
}